<template>
  <div class="content-block block-half-2">
    <div class="info-head">{{ title }}</div>
    <div class="info-content">
      <v-chart
        :option="chartOption"
        :theme="chartTheme" autoresize
        style="width: 100%; height: 400px"
      ></v-chart>
    </div>
  </div>
</template>

<script>
import MixinChartOptionToolbox from '@/mixins/chart-option-toolbox';
import { defaultNumber } from '@/utils';
import MixinVchartTheme from '@/mixins/mixin-vchart-theme';

export default {
  name: 'grid-item-three',
  mixins: [MixinChartOptionToolbox, MixinVchartTheme],
  props: {
    title: String,
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    chartOption() {
      return {
        legend: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: this.pieTooltipFormatter
        },
        grid: {
          // containLabel: true,
          top: '70px'
        },
        toolbox: this.getChartOptionToolbox({
          feature: {
            magicType: null,
          }
        }),
        series: [
          {
            name: this.title,
            type: 'pie',
            radius: [70, 130],
            center: ['50%', '50%'],
            itemStyle: {
              borderRadius: 8
            },
            data: this.data.data || []
          }
        ]
      };
    }
  },
  methods: {
    pieTooltipFormatter: function pieTooltipFormatter ({ color, percent, name, value, data, ...rest }) {
      return `
        <div style="margin: 0;line-height:1;">
          <div style="font-size:14px;color:var(--text-color-regular, #666);font-weight:400;line-height:1;">${name}</div>
          <div style="margin: 10px 0 0;line-height:1;">
            <div style="margin: 0;line-height:1.5;">
              <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>
              <span style="font-size:14px;color:var(--text-color-regular, #666);font-weight:400;margin-left:2px">实物量：</span>
              <span style="font-size:14px;color:var(--text-color-regular, #666);font-weight:900">${defaultNumber(data.notDiscountValue)} ${data ? data.notDiscountUnit || '' : ''}</span>
            </div>
            <div style="margin: 0;line-height:1.5;">
              <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>
              <span style="font-size:14px;color:var(--text-color-regular, #666);font-weight:400;margin-left:2px">折标量：</span>
              <span style="font-size:14px;color:var(--text-color-regular, #666);font-weight:900">${defaultNumber(value)} ${data ? data.unit || '' : ''}</span>
            </div>
            <div style="margin: 0;line-height:1.5;">
              <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>
              <span style="font-size:14px;color:var(--text-color-regular, #666);font-weight:400;margin-left:2px;">占&nbsp;&nbsp;&nbsp;比：</span>
              <span style="font-size:14px;color:var(--text-color-regular, #666);font-weight:900">${percent}%</span>
            </div>
          </div>
        </div>
      `
    },
    optionToContent (opt) {
      try {
        const data = [
          ['能源名称', '单位', '数值'],
          ...opt.series[0].data.map(item => [item.name, item.unit, defaultNumber(item.value)])
        ];
        return this.generateTable(data);
      } catch (e) {
        console.warn(e);
      }
    }
  }
};
</script>
